<template>
  <el-menu class="navbar" mode="horizontal">
    <div style="float:left">
      <div class="sidebar-logo"><img src="../assets/logo.png" /></div>
      <div class="sidebar-logo-mini"><img src="../assets/minilogo.png" /></div>
    </div>
    <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
    <div class="navBg"></div>
    <!-- <breadcrumb class="breadcrumb-container"></breadcrumb> -->

    <!-- <breadcrumb class="breadcrumb-container"></breadcrumb> -->

    <div class="right-menu">

      <!-- 用户信息 -->
      <el-dropdown class="item">
        <span class="el-dropdown-link">
          <!-- <img class="avatar" src="../assets/bigUserHeader.png"> -->
          欢迎你{{name}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/">
            <el-dropdown-item>
              {{$t('navbar.dashboard')}}
            </el-dropdown-item>
          </router-link>
          <el-dropdown-item divided>
            <span @click="logout" style="display:block;">{{$t('navbar.logOut')}}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-menu>
</template>

<script>
import {mapGetters} from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'

export default {
  name: 'layoutNavBar',
  components: {
    Breadcrumb,
    Hamburger
  },
  computed: {
    ...mapGetters(['sidebar', 'name', 'avatar'])
  },
  data() {
    return {
      timeout: null
    }
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('toggleSideBar')
    },
    logout() {
      this.$store.dispatch('FedLogOut').then(() => {
        location.reload() // In order to re-instantiate the vue-router object to avoid bugs
      })
    },
    createStateFilter(queryString) {
      return state => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
      }
    }
  },
  mounted() {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.hideSidebar .navbar{
 left: 36px;
}
.navbar .item .el-input__inner {
  border: 0px;
  border-bottom: 1px solid #dcdfe6;
  border-radius: 0px;
}
.Homelogo{
    background:#1493fa;
    height:56px;
    padding: 15px 0 0;
    text-align: center;
    span{
      background: url(../assets/logo.png) no-repeat 50%;
      display:block;
      height: 28px;
    }
  }

</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.hideSidebar .navbar{
 left: 0;
}
.navbar {
  position:fixed;
  z-index: 1;
  width:100%;
  height: 68px;
  line-height: 68px;
  border-radius: 0px !important;
  background: #0a142a;
  .hamburger-container {
    line-height: 68px;
    height: 68px;
    float: left;
    padding: 0 10px;
  }
  .breadcrumb-container {
    float: left;
  }
  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }
  .right-menu {
    // float: right;
    position: absolute;
    top: 0;
    right: 0px;
    height: 50px;
    .item {
      display: inline-block;
      color:#fff;
      margin-right: 10px;
      i {
        font-size: 18px;
      }
      .btnSearch {
        margin-right: 5px;
        font-size: 18px;
        color:#fff;
      }
      .avatar {
        width: 22px;
        vertical-align: -5px;
      }
    }
  }
}
.navBg{
  background: url(../../assets/navbg.png) no-repeat 50% 50%;
  height: 60px;
}
</style>
